<template>
  <div class="content">
    <header>
      <ul><li @click="back()" class="grey"><img class="back-icon" src="~assets/img/icon_l@2x.png" alt=""> 返回</li><li><h2 style="font-size:16px">{{$parent.title}}</h2></li><li></li></ul>
    </header>
      <router-link to="/update_card" id="box" tag="div" ><b>{{types | type}}</b> <b style="margin-left:10%">{{account | totel}}</b><img class="more-icon" src="~assets/img/icon-r@2x.png" alt="重置支付密码">
        <p>预计两天后{{month}}月{{day}}日23.59之前到账</p>
      </router-link>
      <ul style="margin-top:0" class="flex-box">
        <li><span>提现金额：</span></li>
        <li><input v-model="amount" type="text" :placeholder="placeholder"></li>
        <li style="width:90px"><span style="color:red" @click.stop="all()">全部提现</span><img v-if="isShow" @click="emty()" class="more-icon" src="~assets/img/icon_de@2x.png" alt=""></li>
      </ul>
      <div class="tc"><button ref="btn" @click="prest()" class="common-btn">确认提现</button></div>
  </div>
</template>

<script>
import { apiPost } from 'src/common/api.js'
import { MessageBox } from 'mint-ui'
export default {
  data () {
    return {
      placeholder: '',
      account: '',
      isShow: false,
      amount: '',
      types: '',
      isPay: false,
      num: '0.00',
      account_name: '',
      isPass: false,
      month: '',
      day: ''
    }
  },
  mounted () {
    var time = new Date()
    this.month = (time.getUTCMonth()) + 1
    this.day =(time.getUTCDate()) + 2
     apiPost(`paystatus`, {}
      ).then((data) => {
        if (data.status === 0) {
          if (data.data.recode === 0) {
            this.isPass = true
          } else {
            this.isPass = false
          }
        }
        })
    apiPost('user_balance', {}).then((data) => {
      if (data.data.balance*1 > 0) {
        this.num = data.data.balance
        this.placeholder = `可提现${this.num}元`
      } else {
        this.placeholder = `可提现${this.num}元`
      }
    })
    if (this.$route.params.cardId) {
      this.account = this.$route.params.cardId
      this.types = this.$route.params.types
      this.account_name = this.$route.params.account_name
    } else {
      apiPost('user_account_list', {}).then((data) => {
      this.account = data.data[0].account
      this.types = data.data[0].types
      this.account_name = data.data[0].account_name
    })
    }
  },
  methods: {
    emty () {
      this.amount = ''
    },
     back () {
    this.$router.push('/user')
  },
    prest () {
      if (this.isPay === true) {
        if (this.isPass === false ) {
        if (this.amount >= 100) {
          console.log(this.amount,this.num)
          if (this.amount*1 > this.num*1) {
            MessageBox.alert('提现金额不可超过现提现余额', '提示')
            this.amount = ''
          } else {
             MessageBox.prompt('请输入支付密码',{inputType: 'password'}).then(({ value, action }) => {
              apiPost(`check_paypwd`, {'passwd': value}).then((data) => {
                 if (data.status === 0) {
                   apiPost('user_cash',{'amount': this.amount, 'account': this.account, 'account_name': this.account_name}).then((data) => {
                     if (data.code === 0) {
                       MessageBox.alert('您的提现申请订单已提交,请耐心等候', '提示')
                     } else {
                        MessageBox.alert('系统繁忙，请稍后重试', '提示')
                     }
               })
                 } else {
                   MessageBox.alert('密码输入错误，请重新输入', '提示')
                 }
                 
              })
 }).catch(() => {}) 
          }
        } else {
          MessageBox.alert('提现的金额不得低于100元', '提示')
        }
        } else {MessageBox.alert('请先设置支付密码再进行提现操作', '提示').then(() => {
          this.$router.push('/payment_set')
        })}
      } else {
         MessageBox.alert('请输入提现金额', '提示')
      }
    },
    all () {
      apiPost('user_balance',{}).then ((data) => {
        this.amount = data.data.balance
        this.$refs.btn.style.opacity = '1'
      })
    }
  },
  filters: {
    totel (str) {
      return `${str.slice(0, 3)}******${str.slice(-3)}`
    },
    type (str) {
      if (str === 0) {
        return '银行卡账户'
      } else if (str === 1) {
        return '支付宝账户'
      }
    }
  },
  watch: {
    amount (newM, oldM) {
      if (newM.length > 0) {
        this.isShow = true
        this.isPay = true
        this.$refs.btn.style.opacity = '1'
      } else {
        this.isShow = false
        this.isPay = false
         this.$refs.btn.style.opacity = '0.5'
      }
    }
  }
}
</script>
<style scoped lang = 'scss'>
#box{
  width: 100%;
  background: #fff;
  padding:12px 16px 10px 16px;
  margin:10px 0 10px 0;
  font-size: 16px;
  p{
    font-size: 10px;
    color:#999;
  }
}
</style>
